import React, {Component} from 'react';
import './index.less';
import {base} from 'nc-lightapp-front';
import getLanguage from "../../language";

const {NCPagination, NCSelect} = base;
const NCOption = NCSelect.NCOption;
const language = {};

class Pagination extends Component {
    constructor(props) {
        super(props);
        this.state = {
            language: {}
        };
        this.changePage = this.changePage.bind(this);
        this.pageSizeChange = this.pageSizeChange.bind(this);
    }

    componentDidMount() {
        setTimeout(() => {
            this.props.MultiInit.getMultiLang({
                moduleId: 'p6007',
                domainName: 'hrhi',
                callback: (json, status, inlt) => {
                    this.setState({
                        language: json
                    });
                    Object.assign(language, json);
                }
            });
        }, 1000);
    }

    changePage(value) {
        const {pageInfo, onPageChange} = this.props;
        if (parseInt(pageInfo.pageIndex) + 1 === parseInt(value)) return;
        onPageChange && onPageChange({
            ...pageInfo,
            pageIndex: value - 1
        });
    }

    pageSizeChange(value) {
        const {pageInfo, onPageSizeChange} = this.props;
        onPageSizeChange && onPageSizeChange({
            ...pageInfo,
            pageSize: value,
            pageIndex: 0
        });
    }

    render() {
        const {pageInfo, maxButtons, pageSizeOptions, size} = this.props;
        const {language} = this.state;
        return (
            pageInfo.total > 0 &&
            <div className="pagination-wrapper">
                <div className='page-select-wrapper'>
                    <NCSelect
                        className="page-select"
                        size={size}
                        value={pageInfo.pageSize ? pageInfo.pageSize - 0 : 10}
                        style={{width: 100, marginRight: 6}}
                        onChange={this.pageSizeChange}
                    >
                        {pageSizeOptions.map(item => {
                            return <NCOption key={item}
                                             value={item}>{item} {language['hi6007-000033']}/{language['hi6007-000034']}</NCOption>
                            /* 国际化处理： 条,页*/
                        })}
                    </NCSelect>
                    <span
                        className='total-num'>{language['hi6007-000035']} {pageInfo.total} {language['hi6007-000033']}</span>{/* 国际化处理： 共,条*/}
                </div>
                <div className="table-pagination">
                    <NCPagination
                        items={parseInt(pageInfo.totalPage)}
                        activePage={parseInt(pageInfo.pageIndex) + 1}
                        onSelect={this.changePage}
                        maxButtons={maxButtons}
                        ellipsis
                        boundaryLinks
                        prev
                        next
                        first
                        last
                    />
                </div>
            </div>
        );
    }
}

Pagination.defaultProps = {
    pageInfo: {
        pageSize: 10,
        pageIndex: 0,
        total: 0,
        totalPage: 1
    },
    maxButtons: 5,
    pageSizeOptions: [5, 10, 20, 50, 100],
    size: 'lg'
};

export default Pagination;